<template>
	<view class="page">
		<view class="header">
			<view :style="statusBarStyle"></view>
			<view class="header-avatar">
				<image v-if="userDesc.avatar" :src="userDesc.avatar" @tap="onTapUser" />
				<image v-else src="@/static/header.png" @tap="onTapUser" />
				<text @tap="onTapUser">{{ userDesc.nickName || '微信昵称' }}</text>
			</view>
		</view>
		<view v-for="(group, groupIndex) in mineConfig" :key="groupIndex" class="group">
			<view v-for="(item, index) in group" :key="index" class="groupItem" @tap="handleClick(item)">
				<image v-if="item.icon" :src="item.icon" />
				<text>{{ item.title }}</text>
			</view>
		</view>
		<user-profile :show="showUserProfile" @success="onSuccessUserProfile" @fail="showUserProfile = false"
			@close="showUserProfile = false" />
		<auth-phone :show="showAuthPhone" @success="onSuccessAuthPhone" @fail="showAuthPhone = false"
			@close="showAuthPhone = false" />
	</view>
</template>
<script lang="ts" setup>
	import { onMounted, ref, reactive } from 'vue';
	import { getStatusBarHeight } from '@/utils/device';
	import { onReady } from '@dcloudio/uni-app'
	import { useUserStore, UserDesc } from '@/store/user';
	import { platform } from '@/utils/platform';
	import { throttle } from '@/utils/util';
	import { userApi } from '@/utils/userApi';
	const userStore = useUserStore();
	const statusBarStyle = reactive({
		height: '0px'
	})
	onMounted(() => {
		console.log('mine onMounted');
		console.log('环境', uni.getSystemInfoSync())
	})
	onReady(() => {
		console.log('mine onReady');
		statusBarStyle.height = (getStatusBarHeight()) + 'px';
	})

	const userDesc = ref<UserDesc>({})
	//用户头像
	const onTapUser = async () => {
		if (platform.isWeapp()) {
			showUserProfile.value = true;
		} else if (platform.isAlipay()) {
			await userApi.getUserDescAsync();
			userDesc.value = userStore.getUserDesc;
		}
	}
	const onSuccessUserProfile = () => {
		showUserProfile.value = false;
		userDesc.value = userStore.getUserDesc;
	}
	const showUserProfile = ref(false);
	const showAuthPhone = ref(false);
	const onSuccessAuthPhone = () => {
		showAuthPhone.value = false;
	}
	interface MineConfigModel {
		icon ?: string,
		path : string,
		title ?: string,
		enable ?: boolean,
		requireMobile ?: boolean,
	}
	const mineConfig = ref<Array<Array<MineConfigModel>>>([
		[
			{
				icon: "/static/icon_order.png",
				path: "/order/pages/order/list/order-list",
				title: "我的订单",
				enable: true,
				requireMobile: false,
			},
			{
				icon: "/static/icon_coupon.png",
				path: "/order/pages/coupon/list/coupon-list",
				title: "我的卡券",
				enable: true,
				requireMobile: false,
			},
		],
		// [
		//     {
		//         icon: "/static/icon_ticai.png",
		//         path: "/order/pages/daletou/daletou",
		//         title: "大乐透",
		//         enable: true,
		//     },
		//     {
		//         icon: "/static/icon_fucai.png",
		//         path: "/order/pages/shuangseqiu/shuangseqiu",
		//         title: "双色球",
		//         enable: true,
		//     },
		// ],
		[
			{
				icon: "/static/icon_address.png",
				path: "/mine/pages/address/list/address-list",
				title: "我的地址",
				enable: true,
				requireMobile: false,
			},
		],
		[{
			icon: "/static/icon_debug.png",
			path: "/pages/test-page/test-page",
			title: "开发者模式",
			enable: true,
			requireMobile: false,
		}]
	])
	//菜单
	const handleClick = throttle((item : MineConfigModel) => {
		if (item.requireMobile && !userStore.isLogin) {
			showAuthPhone.value = true;
			return
		}
		uni.navigateTo({
			url: item.path
		})
	})
</script>
<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 225px;
		background: linear-gradient(180deg, var(--primary-color) 0%, #f38763 50%, #eb997d 70%, #f0dfd9 100%);

		&-avatar {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20px 12px;

			image {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}

			text {
				margin-left: 13px;
				color: white;
				font-size: 14px;
			}
		}

		.mobile {
			margin-left: 212px;
			color: white;
			font-size: 14px;
			position: relative;
			width: 150px;
			height: 40px;
			margin: 0 !important;
			padding: 0 !important;
		}
	}

	.group {
		margin: 12px 16px 0;
		width: calc(100% - 32px);
		overflow: hidden;
		background: #fff;
		border-radius: 8px;
	}

	.groupItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2px solid var(--page-color);
		background: white;
		line-height: 3;
		box-sizing: border-box;
		padding-left: var(--page-padding);
		padding-right: var(--page-padding);
		border-radius: 8px;
		font-size: 16px;
		color: var(--color-normal);

		&:active {
			background: var(--primary-color);
			color: white;
		}

		image {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}

		&-open-type {
			width: 100%;
			opacity: 0;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
</style>